$webwork.htmlEncode($page.space.name) : GMaps and VE Overlays with GeoServer and OpenLayers

This tutorial is targeted for GeoServer 1.5.3 and above.

This tutorial assumes that GeoServer is running on http://localhost:8080/geoserver.

Introduction

GeoServer supports the map projection used by both Google Maps and Microsoft Virtual Earth. This map projection has been deemed the "900913" projection ("google" in leet). This makes it as easy as ever to overlay WMS into your GMaps or VE mashup.

OpenLayers provides support for both GMaps and VE layers which allows one to use a single api for creating mashups. In this tutorial we will walk through the process of creating such a mashup which includes a GeoServer WMS overlay.

Getting Started

For this tutorial we will be using the "tiger_roads" dataset which comes pre-configured with GeoServer out of the box. Also, this tutorial assumes that the server is running over "localhost", and the Google Maps api key reflects this. If you are running the server on a different host you will need to obtain your own api key.

Creating the OpenLayers Map

First we will start by creating a quick OpenLayers map. Create a new file called map.html with the following content:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <title>WMS Overlay with GeoServer and OpenLayers</title>
     <style type="text/css">
      #map {
        width: 800px;
        height: 600px;
        border: 1px solid black;
      }
     </style>
     
     <script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript"></script>
     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAIeWnOWItAsdtOsR3kxiUQhTwM0brOpm-All5BF6PoaKBxRWWERSQAgEHUq2jStqEx-kpNgzntg87iw'></script>
     <script type="text/javascript">
       var map;
       
       function init(){
          //create the map
          map = new OpenLayers.Map('map');
//          map.addControl(new OpenLayers.Control.LayerSwitcher());
          map.addControl(new OpenLayers.Control.MouseDefaults());

          //add a google maps layer
          var gmapLayer = new OpenLayers.Layer.Google("GMaps");
          map.addLayer(gmapLayer);

          //add a virtual earth layer
          var veLayer = new OpenLayers.Layer.VirtualEarth("

          map.zoomToExtent(new OpenLayers.Bounds(-134,15,-64,55));
       }
       </script>
    </head>
    <body onload="init()">
      <div id="map"/>
    </body>
</html>